<template>
	<view class="content">
		<Search />
		<Preference :getPreferList='getPreferList' />
		<Tittle />
		<view @click='scrollTo' :catchtouchmove="true">
			<Delicacy id="deli" :class="{is_fixed:isfixed}" />
		</view>

		<Takeout :getWxshopList='getWxshopList' />

	</view>
</template>

<script>
	import Delicacy from './components/delicacy.vue'
	import Preference from './components/preference.vue'
	import Search from './components/search.vue'
	import Takeout from './components/takeout.vue'
	import Tittle from './components/tittle.vue'


	import {
		getprefer,
		wxshop
	} from '../../api/api/forshop.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

				getPreferList: [],
				getWxshopList: [],
				delicacyTop: null,
				top: null,
				isfixed: false
			}
		},
		computed: {
			...mapState(['screenData']),
			listen() {
				this.getWxshopList = this.screenData
			}
		},
		components: {
			Delicacy,
			Preference,
			Search,
			Takeout,
			Tittle
		},

		onLoad() {
			// this.preference()
			// this.wxshop()
			this.scroll()
			this.togetherRequest()
		},
		onPageScroll(e) {

			let {
				scrollTop
			} = e
			if (scrollTop > this.delicacyTop) {
				this.isfixed = true
			} else {
				this.isfixed = false
			}

		},
		methods: {
			async togetherRequest() {
				const res = await Promise.all([getprefer(), wxshop()])
				console.log('res', res)
				this.getPreferList = res[0].data
				this.getWxshopList = res[1].data
			},

			//为你优选
			// https://meituan.thexxdd.cn/api
			// async preference() {
			// 	const {
			// 		data: res
			// 	} = await getprefer()
			// 	this.getPreferList = res
			// 	console.log('getPreferList', this.getPreferList)

			// },
			// async wxshop() {
			// 	const {
			// 		data: res
			// 	} = await wxshop()
			// 	this.getWxshopList = res
			// 	console.log('getWxshopList', this.getWxshopList)

			// },
			scroll() {

				const query = wx.createSelectorQuery()
				query.select('#deli').boundingClientRect()

				query.exec((res) => {

					let {
						top
					} = res[0]

					this.delicacyTop = top

				})
			},
			scrollTo() {
				wx.pageScrollTo({
					scrollTop: this.delicacyTop,
					duration: 300
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 0 15upx;

	}

	.is_fixed {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
	}
</style>
